<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="../template/layout.xhtml">

	<ui:define name="content">
		<div>
			<br />
			<h:form id="formList" prependId="false">
			
				<p:panelGrid columns="2">  
				    <f:facet name="header"> 
				    	<div align="right">
					      	<p:commandLink value="Novo Cliente" process="@this" actionListener="#{clienteMB.novoCliente}" 
					        			   oncomplete="modalForm.show();" update=":idForm" style="margin:0"/> 
				    	</div>
				    </f:facet>  
				</p:panelGrid>
			
				<p:dataTable id="dataTable" var="cliente" value="#{clienteMB.clientes}" styleClass="width100">
					<p:column headerText="#{msg.id}">
						<h:outputText value="#{cliente.id}" />
					</p:column>
					<p:column headerText="#{msg.nome}">
						<h:outputText value="#{cliente.nome}" />
					</p:column>
					<p:column headerText="#{msg.razao_social}">
						<h:outputText value="#{cliente.razaoSocial}" />
					</p:column>
					<p:column headerText="#{msg.cnpj}">
						<h:outputText value="#{cliente.cnpj}" />
					</p:column>
					<p:column headerText="#{msg.ie}">
						<h:outputText value="#{cliente.ie}" />
					</p:column>
					<p:column>
						<p:commandButton value="#{msg.editar}" update=":idForm" oncomplete="modalForm.show()"> 
							 <f:setPropertyActionListener value="#{cliente}" target="#{clienteMB.cliente}" />
						</p:commandButton>
					</p:column>
					<p:column>
						<p:commandButton value="#{msg.excluir}" id="excluir" action="#{clienteMB.excluir}" ajax="false">
							<f:setPropertyActionListener value="#{cliente}" target="#{clienteMB.cliente}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>
			</h:form>
		</div>
	</ui:define>
	
	<ui:define name="moreComponents">
		<p:dialog id="idModalForm" header="Cadastro de Cliente" widgetVar="modalForm" height="350" width="800" modal="true">  
			<h:form id="idForm" prependId="false">
				<p:tabView activeIndex="0">
        			<p:tab title="Dados Clientes">
        				<ui:include src="/pages/includes/tabCliente.xhtml" />
        			</p:tab>
        			
        			<p:tab title="Endereço">
        				<ui:include src="/pages/includes/tabEndereco.xhtml" />	
        			</p:tab>
        			<p:tab title="Contato">
        				<ui:include src="/pages/includes/tabContato.xhtml" />
					</p:tab>
        		</p:tabView>
				<div align="right">
					<br />
					<p:commandButton id="saveButton" 
									 value="#{msg.button_save}" 
								     actionListener="#{clienteMB.salvar}" 
									 update=":formList:dataTable" style="margin:0"/>
			        <p:spacer width="5"></p:spacer>
			        <p:commandButton value="#{msg.button_cancel}" onclick="modalForm.hide();" style="margin:0"/> 
				</div>
				<p:messages id="messages" autoUpdate="true" /> 
			</h:form>
		</p:dialog>
		
		<p:dialog id="idModalFormContato" header="Contato" widgetVar="modalFormContato" height="220" width="460" modal="true">  
			<h:form id="idFormContato" prependId="false">
				<table>
					<tr>
						<td>
							<h:outputLabel value="#{msg.tipo_contato}:">
						    	<br />
						    	<p:inputText value="#{clienteMB.contato.tipoContato}" style="width: 200px;" />
						    </h:outputLabel>
						</td>
						<td>
							<h:outputLabel value="#{msg.nome}:">
						    	<br />
						    	<p:inputText value="#{clienteMB.contato.telefone}" style="width: 200px;" />
						    </h:outputLabel>
						</td>
					</tr>
					<tr>
						<td>
							<h:outputLabel value="#{msg.fone}:">
						    	<br />
						    	<p:inputMask value="#{clienteMB.contato.telefone}" mask="(99)9999-9999" style="width: 200px;"/>
						    </h:outputLabel>
						</td>
						<td>
							<h:outputLabel value="#{msg.fax}:">
						    	<br />
						    	<p:inputMask value="#{clienteMB.contato.fax}" mask="(99)9999-9999" style="width: 200px;"/>
						    </h:outputLabel>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<h:outputLabel value="#{msg.observacao}:">
						    	<br />
						    	<p:inputText value="#{clienteMB.contato.observacao}" style="width: 420px;" />
						    </h:outputLabel>
						</td>
					</tr>
				</table>
				<div align="right">
					<br />
					<p:commandButton id="saveButtonContato" 
									 value="#{msg.button_save}" 
								     actionListener="#{clienteMB.adicionarContato}"
								     update="@(.dataTableContato)" 
									 style="margin:0"/>
			        <p:spacer width="5"></p:spacer>
			        <p:commandButton value="#{msg.button_cancel}" onclick="modalFormContato.hide();" style="margin:0"/> 
				</div>
				<p:messages id="messagesContato" autoUpdate="true" /> 
			</h:form>
		</p:dialog>
		
	</ui:define>
	
</ui:composition>
</html>